<template>
	<view class="mywrap">
		<view class="header-wrap"></view>
		<view class="content-wrap">
			<view class="invite-nums">
				<view class="nums-item">
					<text class="person-num">直接邀请</text>
					<text class="num">{{list.onecount}}</text>
				</view>
				<view class="nums-item ">
					<text class="person-num">累计邀请</text>
					<text class="num">{{list.allcount}}</text>
				</view>
				<view class="nums-item">
					<text class="person-num">间接邀请</text>
					<text class="num">{{list.secondlist}}</text>
				</view>
			</view>

			<view class="invite-list">
				<view class="header borb flex-around">
					<view :class="{'active-tab':tabsIndex == index}" v-for="item,index in list1"
						@click="changTabs(item,index)" :key="index">{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: calc(100vh);"  @scrolltolower="loadMore">
			<view class="list-wrap" v-if="userList.length">
				<view class="list-item" v-for="(item,index) in userList" :key="index">
					<view class="left-wrap ">
						<image class="avatar-img" :src="item.avatar" mode="aspectFill"></image>
						<text class="name">{{item.nickname}}</text>
						<view class="loginTips flex-center-align ml20" v-if="item.loginstatus==0">未登录</view>
						<view v-if="item.second == 1" style="height: 40rpx; line-height: 40rpx;"
							class="inviteTips">
							间接邀请
						</view>
					</view>
					<view class="invite-time">
						{{item.createtime_str}}
					</view>
				</view>
			</view>
			<view v-if="userList.length == 0 && !isLoading" class="empty-wrap flex-column" >
				<image class="empty-img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/images-my/yaoqing-empty.png"></image>
				<text class="tips">暂无邀请记录</text>
				<view class="btn flex-center-align" @click="goInviteCode">
					去邀请
				</view>
			</view>
			<uni-load-more v-if="userList.length != 0" :status="status"></uni-load-more>
		</scroll-view>
		
		<view v-if="userList.length != 0" class="invite flex-center-align" hover-class="none" @click="goInviteCode">
			<text>我要邀请</text>
		</view>

		<u-modal :show="showRules" title="规则" :closeOnClickOverlay="true" @close="showRules = false"
			:showConfirmButton="false">
			<view class="gz-pop flex-column">
				<u-parse :content="list.content"></u-parse>
			</view>
		</u-modal>
		<view class="invite-img">
			<u-popup :show="showPopup" mode="center" @close="showPopup = false" :bgColor="bgColor">
				<view>
					<image :src="path" mode="aspectFit" class="img-content"></image>
				</view>
			</u-popup>
		</view>
		
		<u-popup :show="showPopup" :round="roundRadius" mode="bottom" @close="showPopup = false">
			<view class="footer">
				<view class="footer-content" @click="goShareWx()">
					<image class="img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/invite/weixinCode.png"></image>
					<text class="text">发微信</text>
				</view>
				<view class="footer-content" @click="downLoadImg()">
					<image class="img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/invite/qrcode.png"></image>
					<text class="text">保存图片</text>
				</view>
			</view>
		</u-popup>
		<view>
			<l-painter
			  isCanvasToTempFilePath
			  @success="path = $event"
			  custom-style="position: fixed; left: 200%"
			  css="width: 600rpx; height: 744rpx">
				 <l-painter-view css="width: 600rpx;  height: 744rpx; border-radius: 20rpx;">
					 <l-painter-image
					     src="/static/myContent/inviteBack.jpg"
					     css="width: 600rpx; height: 744rpx; border-radius: 20rpx;"/>
					 <l-painter-view>
						 <l-painter-view
						 css="box-sizing: border-box; background: #FBD88A; border-radius: 50%; width: 400rpx; height: 400rpx; display: flex;justify-content: center;align-items:center;position: absolute;left: 100rpx; bottom: 60rpx">
						 	 <l-painter-image :src="qrCode" css="width: 390rpx; height: 390rpx; border-radius: 50%;"/>
						 </l-painter-view>
					 </l-painter-view>
				 </l-painter-view>
			</l-painter>
		</view>
	</view>
</template>

<script>
	let that;
	import personalApi from "@/api/personal.js"
	// import uParse from '@/components/feng-parse/parse.vue'
	export default {

		data() {
			return {
				showRules: false,
				// content: "1、活动期间主动邀请成功一名用户，属于直接邀请，可获得小竹叶1片，上不封顶。 2、被邀请人成功邀请其他用户，属于间接邀请，您同样可获得小竹叶1片，上不封顶。 3、禁止通过作弊手段骗取奖励，一旦发现将取消奖励并且进行处罚。 4、邀请获取的小竹叶不可进行提现。 5、小竹财税保留法律范围内的最终解释权，如有其它疑问请咨询在线客服。",
				baseInfo: {},
				list: {
					allcount: '',
					data: [],
					onecount: '',
					secondlist: '',
					content: ''
				},

				userList: [],
				page: 1,
				pageSize: 20,
				list1: [{
					name: '直接邀请',
					type: 1
				}, {
					name: '间接邀请',
					type: 2
				}],
				tabsIndex: 0,
				isLoading: true,
				showPopup: false,
				bgColor: 'transparent',
				roundRadius: 10,
				path: '',
				qrCode: '',
				
				status: 'nomore',
			}
		},
		onLoad(e) {
			that = this;
			this.baseInfo = uni.getStorageSync('userInfo') || {}
			this.getInfo()
			this.getWechatCode()
		},
		onNavigationBarButtonTap() {
			this.showRules = true
		},
		
		methods: {
			async getInfo() {
				this.isLoading = true
				let res = await personalApi.newGetMyAllTeam(({
					page: this.page,
					pageSize: this.pageSize,
					type: this.list1[this.tabsIndex].type
				}))
				this.isLoading = false
				if (res.code == '1') {
					if (res.data.data.length  >= this.pageSize) {
						this.status = 'more'
					} else {
						this.status = 'nomore'
					}
					this.list = res.data
					this.userList = res.data.data
				} else {
					that.$used.appBack(res.msg)
				}
			},
			async getNextList() {
				this.isLoading = true
				const res = await personalApi.newGetMyAllTeam({
					page: this.page,
					pageSize: this.pageSize,
					type: this.list1[this.tabsIndex].type
				})
				this.isLoading = false
				if (res.code == 1) {
					if (res.data.data.length  >= this.pageSize) {
						this.status = 'more'
					} else {
						this.status = 'nomore'
					}
					this.userList.push(...res.data.data)
				}
			},
			
			loadMore() {
				console.log('有没有走加载更多')
				if (this.status == 'more') {
					this.page += 1
					this.getNextList()
				}
			},

			changTabs(item, index) {
				this.tabsIndex = index
				this.userList = []
				this.page = 1
				this.getNextList()
			},
			
			goInviteCode() {
				this.showPopup = true
			},
			
			async getWechatCode() {
				let res = await personalApi.getWxCode()
				if(res.code === 1) {
					console.log("小程序码",res)
					this.qrCode ="https://" + res.data
					console.log("小程序码", this.qrCode)
				}
			},
			
			//发送给朋友
			goShareWx() {
				wx.showShareImageMenu({
				    path: this.path
				})
			},
			downLoadImg() {
				uni.showLoading({
					title: '加载中'
				});
				let _that = this
				wx.saveImageToPhotosAlbum({
					filePath: _that.path,
					success: function() {
						uni.showToast({
							title: "保存成功"
						});
					},
					fail: function(res) {
						uni.showToast({
							title: "请稍后再试",
							icon: "none"
						});
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url(@/common/css/reset.css);

	.mywrap {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
		overflow-y: auto;
	}
	
	.header-wrap {
		position: fixed;
		top: 0;
		left: 0;
		height: 280rpx;
		width: 100%;
		background: url('https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/images-my/yaoqing-bg1.png');
		background-size: 100%;
		padding: 140rpx 30rpx 100rpx;
	}
	
	.content-wrap {
		margin-top: 40rpx;
		padding: 0 30rpx;
		position: relative;
		.invite-nums {
			height: 160rpx;
			display: flex;
			justify-content: space-around;
			.nums-item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text-align: center;
				color: #fff;
				margin-top: 50rpx;
				.num {
					font-size: 44rpx;
					font-weight: 500;
				}
		
				.person-num {
					font-size: 28rpx;
				}
			}
		}
		
		.invite-list {
			padding: 0 30rpx;
		
			.header {
				margin-top: 44rpx;
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background: #FFFFFF;
				box-shadow: 0px 9rpx 20rpx 0px rgba(0, 0, 0, 0.06);
				border-radius: 165rpx;
			
			
				.table-header {
					margin-top: 4rpx;
					font-size: 24rpx;
				}
			
				.title {
					font-size: 38rpx;
				}
			
				.active-tab {
					color: #4281C1;
				}
			}
		}
	}

	.list-wrap {
		padding: 13rpx 0;

		.list-item {
			height: 130rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			padding: 0 30rpx;
			
			&:nth-child(2n) {
				border-bottom: 1rpx solid #EDEDED;
			}

			.left-wrap {
				flex: 1;
				display: flex;
				align-items: center;
				.avatar-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}
				
				.name {
					font-weight: 500;
				}
				.loginTips {
					width: 110rpx;
					height: 48rpx;
					border-radius: 50rpx;
					background-color: #f6f6f6;
					color: #999;
					font-size: 24rpx;
				}
				
				.inviteTips {
					margin-left: 20rpx;
					padding: 0 10rpx;
					text-align: center;
					height: 34rx !important;
					border-radius: 516rpx;
					border: 1rpx solid #22B63B;
					font-size: 20rpx !important;
					color: #22B63B;
				}
			}

			.invite-time {
				color: #999999;
				font-size: 24rpx;
			}

		}
	}

	.empty-wrap {
		padding: 80rpx 0 100rpx;
		align-items: center;

		.empty-img {
			width: 262rpx;
			height: 240rpx;
		}

		.tips {
			margin-top: 60rpx;
			font-size: 28rpx;
			color: #727B7F;
		}

		.btn {
			font-size: 28rpx;
			margin-top: 40rpx;
			color: #4DA1FF;
			width: 212rpx;
			height: 76rpx;
			border-radius: 38rpx;
			border: 2px solid #4DA1FF;
		}
	}
	
	.invite {
		margin-left: 58rpx;
		position: fixed;
		left: 0;
		bottom: 36rpx;
		width: 640rpx;
		height: 74rpx;
		background: #3f9cf9;
		border-radius: 46rpx;
		font-size: 28rpx;
		color: #fff;
	
	}
	
	.loading{
		height: 640rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/.u-modal__content {
		flex-direction: column !important;
	}
	
	.footer {
		position: absolute;
		bottom: 0;
		height: 200rpx;
		width: 750rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-around;
	} 
	.footer-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.footer-content .img {
		width: 95rpx;
		height: 95rpx;
	}
	.footer-content .text {
		margin-top: 12rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	// .invite-img ::v-deep .u-popup__content {
	// 	height: 100%;
	// 	width: 100%;
	// }
	
	.img-content {
		width: 600rpx;
		height: 744rpx;
	}
</style>
